<template>
	<view class="detail">
		<!-- 轮播图 -->
		<view class="page">
			<imgsBanner :imgList='serviceDetail.coverImg' :currentImg='currentImg'></imgsBanner>
		</view>
		<!--  -->
		<view class="price_date">
			<view class="price">
				<text>￥{{serviceDetail.price}}</text>
				<text style="text-decoration: line-through;">￥{{serviceDetail.oldPrice}}</text>
			</view>
			<!-- <view class="date">2天 <text>20:32:12</text></view> -->
			<uni-countdown v-if="serviceDetail.activityFlag == 1" :day="countDown.day" :hour="countDown.hour"
				:minute="countDown.minute" :second="countDown.second" color="#D0021B" @timeup="timeup()" />
		</view>
		<!-- 促销 -->
		<view class="company">
			<text class="cu" v-if="serviceDetail.activityFlag == 1">促</text>
			{{serviceDetail.title}}
		</view>
		<view class="zx">{{serviceDetail.advisoryNumber}}咨询</view>
		<view class="hd_detail" v-if="serviceDetail.activityFlag == 1" @tap="detail">
			<view class="gift">
				<image src="../../static/service/gift.png" mode="aspectFit"></image>活动详情
			</view>
			<view class="look">查看<image src="../../static/first/right.png"></image>
			</view>
		</view>
		<!-- 服务流程 -->
		<view class="progress">
			<view class="title">
				<image src="../../static/first/zs.png"></image>
				<view class="hot">服务流程</view>
			</view>
			<view class="progress_name">
				<view class="tu" v-for="(item,index) in serviceDetail.processList" :key="index">
					<view class="hh">
						<view class="ball">{{index + 1}}</view>
						<view class="n">
							<view>{{item.name}}</view>
						</view>
					</view>
					<view class="line" v-if="index < serviceDetail.processList.length -1"></view>
				</view>
			</view>
		</view>
		<!-- 服务介绍 -->
		<view class="service_tro">
			<view class="title">
				<image src="../../static/first/zs.png"></image>
				<view class="hot">服务介绍</view>
			</view>
			<view class="introduction" v-html="serviceDetail.introduction"></view>
		</view>
		<view style="height: 124upx;"></view>
		<!-- 底部 -->
		<!-- 底部菜单 -->
		<view class="footer" v-if="footer">
			<view class="icons">
				<view class="box" @tap="keep">
					<view class="icon shoucang">
						<image
							:src="isKeep?'../../static/service/shoucangchoose.png':'../../static/service/shoucang.png'">
						</image>
					</view>
					<view class="text">{{isKeep?'已':''}}收藏</view>

				</view>
				<view class="box" @tap="share">
					<view class="icon fenxiang">
						<image src="../../static/service/share.png"></image>
					</view>
					<view class="text">分享</view>
				</view>
				<view class="box" @tap="toChat">
					<view class="icon kefu">
						<image src="../../static/service/phone.png"></image>
					</view>
					<view class="text">电话</view>
				</view>

			</view>
			<view class="btn">
				<button class="yuding" @click="toScheduleService">预定服务</button>
				<button class="liuyan" @click="toMessage">留言咨询</button>
			</view>
		</view>

		<!-- share弹窗 -->
		<view class="share-pro" v-if="deliveryFlag">
			<view class="share-pro-mask"></view>
			<view class="share-pro-dialog" :class="deliveryFlag?'open':'close'">
				<view class="close-btn">
					<image src="../../static/service/close.png" @tap="hideShare"></image>
				</view>
				<view class="share-pro-title">分享</view>
				<view class="share-pro-body">
					<view class="list">
						<view class="box">
							<button class="btn" open-type="share">
								<image src="../../static/service/wechat.png"></image>
							</button>
							<view class="title">
								微信好友
							</view>
						</view>
						<view class="box">
							<button class="btn" open-type="share">
								<image src="../../static/service/jzbs.png"></image>
							</button>
							<view class="title">
								生活圈
							</view>
						</view>
						<!-- <view class="box">
							<image src="../../static/service/weibo.png"></image>
							<view class="title">
								新浪微博
							</view>
						</view>
						<view class="box">
							<image src="../../static/service/fzlj.png"></image>
							<view class="title">
								复制链接
							</view>
						</view> -->
					</view>
				</view>
				<button class="share_close" @tap="hideShare">关闭</button>
			</view>
		</view>
		<!-- 活动详情弹窗 -->
		<view class="share-pro1" v-if="detail_mask">
			<view class="share-pro-mask1"></view>
			<view class="share-pro-dialog1" :class="detail_mask?'open':'close'">
				<view class="close-btn1">
					<image src="../../static/service/close.png" @tap="hideShare"></image>
				</view>
				<view class="share-pro-title1">活动详情</view>
				<view class="share-pro-body" style="margin-left: 20rpx;">
					{{serviceDetail.activityRule}}
				</view>
				<button class="share_close" @tap="hideShare">关闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	import imgsBanner from '../../components/imgsBanner-tag/imgsBanner-tag.vue'
	export default {
		components: {
			imgsBanner,
		},
		data() {
			return {
				currentImg: 0, //当前默认选中
				checked: '',
				fgColor: {},
				favorite: {},
				isKeep: false, //收藏
				hareClass: '', //分享弹窗css类，控制开关动画
				shareClass: '', //分享弹窗css类，控制开关动画
				deliveryFlag: false,
				footer: true,
				detail_mask: false,
				serviceDetail: {
					coverImg: [],
					price: 0,
					oldPrice: 0,
					title: '',
					advisoryNumber: 0,
					introduction: '',
					activityRule: '',
					activityFlag: '',
					processList: [],
					contactNumber: '',
					serviceId: ''
				},
				countDown: {
					day: 0,
					hour: 0,
					minute: 0,
					second: 20
				}
			}
		},
		onLoad(op) {
			let data = JSON.parse(decodeURIComponent(op.op))
			this.serviceDetail.coverImg = data.coverImg
			this.serviceDetail.price = data.price
			this.serviceDetail.oldPrice = data.oldPrice
			this.serviceDetail.title = data.title
			this.serviceDetail.advisoryNumber = data.advisoryNumber
			this.serviceDetail.introduction = data.introduction
			this.serviceDetail.activityRule = data.activityRule
			this.serviceDetail.activityFlag = data.activityFlag
			this.serviceDetail.contactNumber = data.contactNumber
			this.serviceDetail.serviceId = data.id
			this.getServiceProcess(data.id)
			this.getLimitDateByServiceId(data.id)
			this.getServiceFavoriteCount()
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
		},
		//发送给朋友
		onShareAppMessage(res) {
			// return {
			// 	path: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(this.serviceDetail))
			// }
		},
		//分享到朋友圈
		onShareTimeline(res) {
			// return {
			// 	path: '/pages/serve/serviceDetail?op=' + encodeURIComponent(JSON.stringify(this.serviceDetail))
			// }
		},
		methods: {
			//活动倒计时结束触发
			timeup() {
				getApp().globalData.timeUp = true
				this.serviceDetail.activityFlag = 0
				uni.showToast({
					title: '该活动已结束',
					icon: 'none'
				})
			},
			//获取服务的剩余活动时间
			getLimitDateByServiceId(serviceId) {
				uni.request({
					url: this.$serverUrl + 'ftService/getLimitDateByServiceId/serviceId/' + serviceId,
					success: (res) => {
						let data = res.data
						this.countDown.day = data.day
						this.countDown.hour = data.hour
						this.countDown.minute = data.minute
						this.countDown.second = data.second
					}
				})
			},
			//判断是否收藏过该服务
			getServiceFavoriteCount() {
				let userInfo = uni.getStorageSync('userInfo')
				uni.request({
					url: this.$serverUrl + 'ftService/getServiceFavoriteCount',
					method: 'POST',
					data: {
						userId: userInfo.id,
						serviceId: this.serviceDetail.serviceId
					},
					success: (res) => {
						if (res.data > 0) {
							this.isKeep = true
						} else {
							this.isKeep = false
						}
					}
				})
			},
			//提示
			showToast(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			//收藏
			keep() {
				let userInfo = uni.getStorageSync('userInfo')
				if (this.isKeep == false) {
					//收藏
					uni.request({
						url: this.$serverUrl + 'ftService/serviceFavorite',
						method: 'POST',
						data: {
							"userId": userInfo.id,
							"serviceId": this.serviceDetail.serviceId
						},
						success: (res) => {
							this.isKeep = true
							this.showToast('收藏成功')
						}
					})
				} else {
					//取消收藏
					uni.request({
						url: this.$serverUrl + 'ftService/cacelServiceFavorite',
						method: 'POST',
						data: {
							"userId": userInfo.id,
							"serviceId": this.serviceDetail.serviceId
						},
						success: (res) => {
							this.isKeep = false
							this.showToast('取消成功')
						}
					})
				}
			},
			// 分享
			share() {
				this.deliveryFlag = true
				this.footer = false
			},
			// 关闭分享
			hideShare() {
				this.deliveryFlag = false;
				this.footer = true
				this.detail_mask = false
			},
			// 活动详情弹窗
			detail() {
				this.detail_mask = true
				this.footer = false
			},
			//获取服务进度详情
			getServiceProcess(serviceId) {
				uni.request({
					url: this.$serverUrl + 'ftService/getServiceProcess/' + serviceId,
					success: (res) => {
						this.serviceDetail.processList = res.data
					},
					fail: (e) => {
						uni.showToast({
							title: '服务进度获取失败',
							icon: 'none'
						})
					}
				})
			},
			//打电话
			toChat() {
				uni.makePhoneCall({
					phoneNumber: this.serviceDetail.contactNumber
				})
			},
			//跳转留言咨询页面
			toMessage() {
				uni.navigateTo({
					url: '/pages/serve/message?item=' + encodeURIComponent(JSON.stringify(this
							.serviceDetail)) +
						'&type=' + 1
				})
			},
			//预定服务
			toScheduleService() {
				uni.navigateTo({
					url: '/pages/serve/message?item=' + encodeURIComponent(JSON.stringify(this
							.serviceDetail)) +
						'&type=' + 2
				})
			}
		}
	}
</script>

<style lang="scss">
	.introduction {
		margin-top: 30rpx;
	}

	.detail {
		.price_date {
			display: flex;
			justify-content: space-between;
			margin: 40upx 36upx;

			.price {
				display: flex;
			}

			.price text:nth-child(1) {
				color: #DE3232;
				font-size: 18px;
			}

			.price text:nth-child(2) {
				color: #999999;
				font-size: 14px;
			}

			.date {
				color: #D0021B;

				text {
					margin-left: 10upx;
				}
			}

		}

		.company {
			margin: 58upx 36upx 0 36upx;
			letter-spacing: 3upx;

			font-size: 40upx;

			.cu {
				width: 50upx;
				height: 50upx;
				background-color: #f87935;
				color: #FFFFFF;
				text-align: center;
				line-height: 50upx;
				border-radius: 5upx;
				margin-right: 15upx;
				padding: 5upx;
			}
		}

		.zx {
			margin: 24upx 36upx;
			color: #999999;
		}

		.hd_detail {
			margin: 52upx 36upx 0 36upx;
			height: 124upx;
			background-color: #FAFAFA;
			display: flex;
			padding: 0 30upx;
			justify-content: space-between;
			align-items: center;

			.gift {
				display: flex;
				align-items: center;

				image {
					width: 52upx;
					height: 52upx;
					margin-right: 20upx;
				}
			}

			.look {
				display: flex;
				align-items: center;
				color: #666666;
				font-size: 26upx;

				image {
					width: 28upx;
					height: 28upx;
					margin-left: 20upx;
				}
			}

		}

		.progress {
			margin: 50upx 36upx;

			.title {
				display: flex;
				align-items: flex-end;
				font-size: 36upx;
				font-weight: bold;

				image {
					width: 22upx;
					height: 26upx;
					margin-right: 28upx;
				}
			}
		}

		.progress_name {
			// margin: 40upx 40upx;
			margin-top: 30rpx;
			margin-left: 30rpx;

			display: flex;
			justify-content: space-between;

			.tu {
				// width:300upx;
				width: 25%;
				display: flex;
				// align-items: center;
				flex-direction: row;

				.hh {
					display: flex;
					flex-direction: column;
					align-items: center;
					width: 60%;
				}

				.ball {
					width: 70upx;
					height: 70upx;
					background-color: #00B2CA;
					border-radius: 50%;
					color: #FFFFFF;
					font-size: 40upx;
					text-align: center;
					line-height: 70upx;

				}

				.n {
					font-size: 24upx;
				}

				.line {
					width: 40%;
					height: 0upx;
					margin-top: 35upx;
					border-bottom: 1px dashed #666666;
				}
			}

		}

		.n {
			display: flex;
			justify-content: space-around;
		}

		.service_tro {
			margin: 50upx 36upx;

			.title {
				display: flex;
				align-items: flex-end;
				font-size: 36upx;
				font-weight: bold;

				image {
					width: 22upx;
					height: 26upx;
					margin-right: 28upx;
				}
			}
		}
	}

	// 底部
	.footer {
		position: fixed;
		bottom: 0upx;
		width: 92%;
		padding: 0 4%;
		height: 124upx;
		border-top: solid 1upx #eee;
		background-color: #fff;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;
			height: 88upx;
			margin-left: -4%;

			.box {
				width: 80upx;
				height: 88upx;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;

				.icon {
					font-size: 40upx;
					color: #828282;
				}

				.text {
					display: flex;
					justify-content: center;
					width: 100%;
					font-size: 22upx;
					color: #666;
				}
			}
		}

		.btn {
			height: 88upx;
			// border-radius: 40upx;
			overflow: hidden;
			display: flex;
			margin-right: -2%;

			.joinCart,
			.buy {
				height: 80upx;
				padding: 0 40upx;
				color: #fff;
				display: flex;
				align-items: center;
				font-size: 28upx;
			}

			.joinCart {
				background-color: #f0b46c;
			}

			.buy {
				background-color: #f06c7a;
			}
		}
	}

	.fenxiang image {
		width: 52upx;
		height: 52upx;
	}

	.kefu image {
		width: 52upx;
		height: 52upx;
	}

	.shoucang image {
		width: 52upx;
		height: 52upx;
	}

	.yuding {
		border: 1px solid #00B2CA;
		color: #00B2CA;
		margin-right: 20upx;
		width: 210upx;
		font-size: 26upx;
		height: 88upx;
		line-height: 88upx;
	}

	.liuyan {
		color: #FFFFFF;
		background-color: #00B2CA;
		width: 210upx;
		font-size: 26upx;
		height: 88upx;
		line-height: 88upx;
	}

	// 分享
	.share-pro {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 5;
		line-height: 1;
		box-sizing: border-box;

		.share-pro-mask {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}

		.share-pro-dialog {
			width: 750rpx;
			height: 450rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;

			.close-btn {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;

				image {
					width: 48upx;
					height: 48upx;

				}
			}

			.share-pro-title {
				font-size: 28rpx;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				// background-color: #f7f7f7;

				text-align: center;
			}

			.share-pro-body {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				font-size: 28rpx;
				color: #1c1c1c;

				// margin-bottom: 50upx;
				.list {
					width: 100%;
					display: flex;
					padding: 10upx 0 30upx 0;

					.box {
						width: 25%;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						image {
							width: 13.8vw;
							height: 13.8vw;
						}

						.title {
							margin-top: 10upx;
							display: flex;
							justify-content: center;
							width: 100%;
							font-size: 26upx;
						}
					}
				}

				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					justify-content: space-around;

					.share-icon {
						text-align: center;
						font-size: 70rpx;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
						color: #42ae3c;
					}

					&:nth-child(2) {
						.share-icon {
							color: #ff5f33;
						}
					}
				}
			}

			.share_close {
				margin: 50upx 36upx 17upx 36upx;
				color: #FFFFFF;
				background-color: #00B2CA;
				height: 88upx;
				line-height: 88upx;
			}
		}

		/* 显示或关闭内容时动画 */

		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}

		.close {
			transition: all 0.3s ease-out;
			transform: translateY(310rpx);
		}
	}

	// 活动详情
	.share-pro1 {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		flex-direction: column;
		z-index: 5;
		line-height: 1;
		box-sizing: border-box;

		.share-pro-mask1 {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.5);
		}

		.share-pro-dialog1 {
			width: 750rpx;
			// height: 400rpx;
			overflow: hidden;
			background-color: #fff;
			border-radius: 24rpx 24rpx 0px 0px;
			position: relative;
			box-sizing: border-box;
			position: fixed;
			bottom: 0;

			.close-btn1 {
				padding: 20rpx 15rpx;
				position: absolute;
				top: 0rpx;
				right: 29rpx;

				image {
					width: 48upx;
					height: 48upx;

				}
			}

			.share-pro-title1 {
				font-size: 28rpx;
				color: #1c1c1c;
				padding: 28rpx 41rpx;
				// background-color: #f7f7f7;

				text-align: center;
			}

			.share-pro-body1 {
				display: flex;
				flex-direction: row;
				justify-content: space-around;
				font-size: 28rpx;
				color: #1c1c1c;

				// margin-bottom: 50upx;
				.list {
					width: 100%;
					display: flex;
					padding: 10upx 0 30upx 0;

					.box {
						width: 25%;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						image {
							width: 13.8vw;
							height: 13.8vw;
						}

						.title {
							margin-top: 10upx;
							display: flex;
							justify-content: center;
							width: 100%;
							font-size: 26upx;
						}
					}
				}

				.share-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					justify-content: space-around;

					.share-icon {
						text-align: center;
						font-size: 70rpx;
						margin-top: 39rpx;
						margin-bottom: 16rpx;
						color: #42ae3c;
					}

					&:nth-child(2) {
						.share-icon {
							color: #ff5f33;
						}
					}
				}
			}

			.share_close {
				margin: 50upx 36upx 17upx 36upx;
				color: #FFFFFF;
				background-color: #00B2CA;
				height: 88upx;
				line-height: 88upx;
			}
		}

		/* 显示或关闭内容时动画 */

		.open {
			transition: all 0.3s ease-out;
			transform: translateY(0);
		}

		.close {
			transition: all 0.3s ease-out;
			transform: translateY(310rpx);
		}
	}

	.btn {
		padding: 0;
		margin: 0;
		color: #222222;
		background-color: #FFFFFF;
		font-size: 28rpx;
		line-height: 40rpx;
		margin-top: 10rpx;
	}

	.btn::after {
		border: none;
	}
</style>
